<template>
    <el-dialog :title="action === 'add' ? '新增' : '修改'" width="40%" draggable :close-on-click-modal="false"
        v-model="visible" @open="submitted = false">
        <el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter="dataFormSubmit(dataFormRef)"
            label-width="90px">
            <el-form-item label="广告名称" prop="name">
                <el-input v-model="dataForm.name" minlength="2" maxlength="50" show-word-limit placeholder="广告名称" />
            </el-form-item>
            <el-form-item label="广告时间" prop="time">
                <el-date-picker v-model="dataForm.time" type="daterange" range-separator="-" value-format="YYYY-MM-DD" start-placeholder="开始时间" end-placeholder="结束时间" />
            </el-form-item>
            <el-form-item label="广告图片" prop="pic">
                <list-upload v-model="dataForm.pic" :limit="1"></list-upload>
            </el-form-item>
            <el-form-item label="广告状态" prop="status">
                <el-radio-group v-model="dataForm.status">
                    <el-radio border :label="1">上线</el-radio>
                    <el-radio border :label="0">下线</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="广告类型" prop="type">
                <el-radio-group v-model="dataForm.type">
                    <el-radio border :label="1">首页大图</el-radio>
                    <el-radio border :label="2">首页小图</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="广告链接" prop="url">
                <el-input v-model="dataForm.url" minlength="2" maxlength="200" show-word-limit placeholder="广告链接" />
            </el-form-item>
            <el-form-item label="广告排序" prop="sort">
                <el-input-number v-model="dataForm.sort" :min="1" :max="10000" label="广告排序" />
            </el-form-item>
            <el-form-item label="广告备注" prop="desc">
                <el-input type="textarea" v-model="dataForm.note" maxlength="250" show-word-limit placeholder="广告备注" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="ad-footer">
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" @click="dataFormSubmit(dataFormRef)" :disabled="submitted">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import admin from "@/utils/admin";
import http from "@/utils/httpRequest";
import validate from "@/utils/validate";
import { ref, reactive, nextTick, defineExpose, defineEmits } from "vue";
import { ElMessageBox, FormInstance } from "element-plus";

import ListUpload from "@/components/upload/list-upload.vue";

// 操作：add-新增，update-修改
const action = ref("");

// 弹窗是否显示
const visible = ref(false);

// 提交按钮是否禁用
const submitted = ref(false);

// 表单数据
const dataForm = reactive({
    id: undefined,
    name: "",
    pic: "",
    time: [],
    status: 0,
    type: 1,
    url: "",
    sort: 1,
    note: "",
});

// 表单校验规则
const dataRule = reactive({
    name: validate.required("广告名称"),
    time: validate.required("广告时间"),
    pic: validate.required("广告图片"),
    status: validate.required("广告状态"),
    type: validate.required("广告类型"),
    url: validate.required("广告链接"),
});

// 表单引用
const dataFormRef = ref<FormInstance>();

// 父级组件的自定义事件
const emit = defineEmits(['loadTableData']);

// 表单初始化
const initForm = async (action, node) => {
    action = action;
    // 新增
    if (action === "add") {
        visible.value = true;
        await nextTick();
        dataFormRef.value.resetFields();
        dataForm.id = "";
        dataForm.pic = "";
        return;
    }
    // 修改操作
    dataForm.id = node.id;
    http
        .post({
            url: "/coupon/home-adv/info",
            params: { homeAdvId: dataForm.id },
        }).then(async ({ data }) => {
            if (http.success(data)) {
                visible.value = true;
                await nextTick();
                dataFormRef.value.resetFields();
                dataForm.id = data.body.id;
                dataForm.name = data.body.name;
                dataForm.pic = data.body.pic;
                dataForm.time = [data.body.startTime, data.body.endTime];
                dataForm.status = data.body.status;
                dataForm.url = data.body.url;
                dataForm.sort = data.body.sort;
                dataForm.note = data.body.note;
            }
        });
};

// 表单提交
const dataFormSubmit = (form: FormInstance | undefined) => {
    if (submitted.value) {
        return;
    }
    form.validate((valid) => {
        if (valid) {
            submitted.value = true;
            http
                .post({
                    url: `/coupon/home-adv/save`,
                    data: {
                        id: dataForm.id || undefined,
                        name: dataForm.name,
                        pic: dataForm.pic,
                        startTime: dataForm.time[0],
                        endTime: dataForm.time[1],
                        status: dataForm.status,
                        type: dataForm.type,
                        url: dataForm.url,
                        sort: dataForm.sort,
                        note: dataForm.note,
                    },
                }).then(({ data }) => {
                    if (http.success(data, true)) {
                        visible.value = false;
                        emit("loadTableData");
                        return;
                    }
                    submitted.value = false;
                });
        }
    });
};

// 暴露方法
defineExpose({ initForm });
</script>
